上一章节，讲解了v-bind绑定属性的基本用法，那么本章节再来看看在Vue中如何进行事件监听。毕竟事件监听对于前端业务来说，还是一个大头事情呢！所以，必须讲讲。

而在Vue.js中用来监听事件的方法就是v-on，下面来看看基本介绍。

v-on命令就是相当于js中的事件绑定，例如绑定click、mouseover等等监听事件。

本篇章基于click事件作为示例，说明v-on的基本使用方法。

直接使用指令v-on

使用简化指令@

https://cn.vuejs.org/v2/api/#v-on

这上面的一堆就是官网中说明v-on的基本用法，下面来看看快速入门的示例。

浏览器显示如下：

可以从上面的代码看到，在Vue示例中需要设置methods来写方法show()，而show() 其实是show:function()的简写方式。

可以简写为：

为了更加快速编写，可以直接使用@符号来绑定监听事件。

好了，看到这里，应该基本理解了v-on最最最最基本的用法，下面来加强一个跑马灯的示例。

使用v-on来编写一个跑马灯的效果示例。效果示例如下：

通过两个按钮控制下面的字符串在一定的区域内循环往左滚动，形成跑马灯的效果。

编写两个按钮 「start」 和 「stop」，并且使用v-on进行click监听。分别绑定start_run() 和 stop_run() 方法。

start_run() 方法首先需要获取当前显示的字符串Hello world, this is funny，然后使用substring(开始截取的字符位置, 停止截取的字符位置)截取字符串，将第一个字符拼接到最后去。

设置一个定时器setInterval() 控制不断截取字符，并逐个拼接到最后，形成滚动效果。

stop_run()方法则是执行停止定时器clearInterval()即可。

浏览器显示如下：

多次点击start按钮，显示如下：

在浏览器执行一下，发现报错，如下：

在这里提示substring方法未定义，其实这是一个this指针的问题。因为当将截取字符串的操作方法放入定时器的function()中，那么此时this指针则是指向function，而function()并没有定时msg，由于找不到msg，进而提示找不到substring方法。

解决这个问题可以使用箭头函数=>，将外部的「this」指针赋值给function()方法中。

如下：

测试打开浏览器显示如下：

如果要停止定时器，那么就要记录定时器的id信息，用于停止。那么这个「定时器的id」就需要是一个全局变量，提供stop_run()和start_run()方法都可以访问到。

浏览器点击start按钮之后，再点击stop按钮，停止运行，如下：

但是这里其实有个BUG，如果多次点击「start按钮」，那么将会创建多个定时器，而记录定时器id只会记录最后一个创建的定时器，那么则无法全部停止。

那么这时候就要做一些判断来限制启动定时器，并且关闭定时器之后，需要重置一下定时器id为null。

其实就是将启动定时器的ID在data数据中记录下来，用来控制是否启动一个新的定时器。

只要这样控制住，无论点击多少次start按钮都只会生存一个定时器，只要点击一次stop按钮就可以停止定时器了。

好了，写到这里章节也比较长了。下一章节继续来看看「v-on的事件修饰符」。

交流QQ群：

点击下面，查看更多Vue系列文章